<template>
<div class="new-list">
    <!-- 卡片 -->
    <!-- <Card class="contain">
        <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            {{ $t('home.news') }}
        </p>
        <a href="#" slot="extra" @click.prevent="changeLimit">
            <Icon type="ios-loop-strong"></Icon>
            Change
        </a>
        <ul>
            <a @click="handleToNews(item.id)" target="_blank" v-for="item in newList">
                <li>
                    <p>{{ item.title }}</p>
                    <p>
                        {{ item.time }}
                    </p>
                </li>
            </a>
        </ul>
    </Card> -->
    <!-- 时间轴 -->
    <div class="contain">
        <div v-if="isNewListshow">
            <div class="img-box animated bounceInLeft">
                <img src="../../assets/images/img9.jpg"/>
            </div>

            <div class="new-time animated bounceInRight">
                <Timeline>
                    <TimelineItem pending v-for="item in this.$t('home.newList')" :key="item.id">
                        <a @click="handleToNews(item.id)">{{ item.title }}</a>
                        <p> {{ item.time }} </p>
                    </TimelineItem>
                    <TimelineItem><a>{{$t('more')}}</a></TimelineItem>
                </Timeline>
            </div>
        </div>
    </div>
</div>
</template>
<script>
    export default {
        name: "CommonNewList",
        props: [""],//若从首页请求回来数据
        data () {
            return {
                randomNewList: [],
                isNewListshow: true
            }
        },
        methods: {
            handleToNews(id){
                this.$router.push({path:'/new',query:{ id:id }})
            },
            //随机切换列表数据
            changeLimit () {
                function getArrayItems(arr, num) {
                    const temp_array = [];
                    for (let index in arr) {
                        temp_array.push(arr[index]);
                    }
                    const return_array = [];
                    for (let i = 0; i<num; i++) {
                        if (temp_array.length>0) {
                            const arrIndex = Math.floor(Math.random()*temp_array.length);
                            return_array[i] = temp_array[arrIndex];
                            temp_array.splice(arrIndex, 1);
                        } else {
                            break;
                        }
                    }
                    return return_array;
                }
                this.randomNewList = getArrayItems(this.newList, 5);
            },
            handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop >=0){
                    this.isNewListshow = true;
                }
            }
        },
        mounted () {
            this.changeLimit();
            window.addEventListener('scroll', this.handleScroll)
        }
        
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.new-list{
    margin-bottom: 1rem;
    overflow: hidden;
    .img-box{
        width: 380px;
        float: left;
        margin-right: $gSpace;
        margin-bottom: $gSpace;
        img{
            width: 100%
        }
    }
    .new-time{
        float: left;
    }
    //引入动画
    // .fade-enter, .fade-leave-to{
    //   opacity: 0;
    // }
    // .fade-enter-active, .fade-leave-active {
    //   transition: opacity 2s;
    // }

    // @keyframes bounce-in {
    //     0% {
    //         transform: scale(0);
    //     }
    //     50% {
    //         transform: scale(1.5);
    //     }
    //     100% {
    //         transform: scale(1);
    //     }
    // }
    
    // .fade-enter-active{
    //     transform-origin: left center;
    //     animation: bounce-in 1s;
    // }
    // .fade-leave-active {
    //     transform-origin: left center;
    //     transition: bounce-in 1s reverse;
    // }

}


</style>
